<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1">
    <title>Touch Action Test Page</title>
  </head>
  <body>
    <div id="target" style="height:200px">
      Events are logged when tests touch this div.
    </div>
    <!-- use "white-space:nowrap;" to prevent page reflows while swiping, see
    https://bugs.chromium.org/p/chromedriver/issues/detail?id=1508 -->
    <div id="events" style="white-space:nowrap;">events: </div>
    <div id="padding">
      We need some padding here so that the page is large enough to test swipe
      and scroll actions.
    </div>
    <div id="bottom">This is the bottom of the page.</div>
    <script>
      events = document.getElementById('events');
      var eventTypes = ['touchstart', 'touchend', 'touchmove', 'touchcancel'];
      var eventListener = function(evt) {
        events.innerHTML += ' ' + evt.type;
      };

      var target = document.getElementById('target');
      for (var i = 0; i < eventTypes.length; i++) {
        target.addEventListener(eventTypes[i], eventListener);
      }

      var padding = document.getElementById('padding');
      padding.style.border = 'solid';
      padding.style.height = window.screen.height * 2 + 'px';
      padding.style.width = window.screen.width * 2 + 'px';
    </script>
  </body>
</html>
